import { List ,Flex} from 'antd-mobile';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import ShopInfo from './shopInfo.jsx'
import ShopDetail from './shopDetail.jsx'
import SVGIcon from '../../modules/svgIcon.jsx'
const Item = List.Item;

let initialized = false;
let shopsData = [];
class Shops extends React.Component{

    constructor(props){
        super(props);
        this.state = {
            shopsData : shopsData
        }
    }

    componentDidMount(){
        initToken();
        let params = {
            typeCode : 'commShopsInfo',
            commCode : getUrlParam("commCode")
        }

        initialized = true;
        if(shopsData.length == 0) {
            postJson("/api/v3/cms/anon/queryResourcesByComm", params, (data) => {
                this.state.shopsData = shopsData = data;
                this.setState({});
            });
        }
    }

    onClick(shop){
        this.props.history.push("/shops/info",shop.resource);
    }

    render(){
        console.log("length "+this.state.shopsData.length);
        if(initialized && this.state.shopsData.length == 0)
            return (
                <Flex direction="column">
                    <img src="/pic/no_content.png" className="no-content-img"></img>
                    <span>暂无任何店铺内容</span>
                </Flex>
            )
        else
            return (
                <div>
                    {
                        this.state.shopsData.map((shop)=>{
                            return (
                                <List>
                                    <Item thumb={<SVGIcon type={shop.icon}/>} arrow = "horizontal" onClick={()=>this.onClick(shop)} style={{height:70}}>
                                        {shop.typeName}
                                    </Item>
                                </List>
                            )
                        })
                    }

                </div>
            )
    }
}

ReactDOM.render(
 <Router>
     <Switch>
         <Route exact path="/pages/mobile/comm/shops/shops.html" component={Shops}/>
         <Route path="/shops/info" component={ShopInfo}/>
         <Route path="/shops/detail" component={ShopDetail}/>
     </Switch>
 </Router>,document.getElementById("shops"));